<template>
  <div class="h-full">
    <div class="flow">
      <el-steps :active="activeStep" finish-status="success">
        <el-step v-for="(item, i) in stepList" :key="i" :class="{ isActive: activeStep == i }" :title="item.title" />
      </el-steps>
    </div>
    <div class="content" :style="{ height: `${Number(getHeight)}px` }">
      <ProcessStart v-if="$store.state.apim.step < '5'" />
      <ProcessWJ v-else />
    </div>
  </div>
</template>
<script>
  import ProcessStart from './processStart'
  import ProcessWJ from './processWJ.vue'
  import debounce from 'lodash/debounce'
  import { translateTitle } from '@/utils/i18n'

  export default {
    name: 'ProcessConfig',
    components: { ProcessStart, ProcessWJ },
    data() {
      return {
        clientHeight: 0,
        postmanDialog: false,
        stepList: [
          { title: translateTitle('Dams.ProcssConfig.接口注册') },
          { title: translateTitle('Dams.ProcssConfig.入向参数设置') },
          { title: translateTitle('Dams.ProcssConfig.入向报文设置') },
          { title: translateTitle('Dams.ProcssConfig.出向参数设置') },
          { title: translateTitle('Dams.ProcssConfig.出向报文设置') },
          { title: translateTitle('Dams.ProcssConfig.回调配置') },
          { title: translateTitle('Dams.ProcssConfig.增强配置') },
          { title: translateTitle('Dams.ProcssConfig.完成') },
        ],
      }
    },
    computed: {
      getHeight() {
        return `${this.clientHeight - 160}`
      },
      activeStep() {
        let activeStep = this.$store.state.apim.step
        return activeStep - 1
      },
    },
    created() {
      this.init()
    },
    methods: {
      translateTitle,
      windowResize: debounce(function () {
        console.log('document.documentElement.clientHeight', document.documentElement.clientHeight)
        this.clientHeight = document.documentElement.clientHeight
      }, 100),
      init() {
        this.windowResize()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .flow {
    width: 100%;
    padding: 10px;
  }
  :deep() {
    .el-step.is-horizontal {
      display: flex;
    }

    .el-step__head {
      width: 36px;
      line-height: 38px;
    }
    .el-step.is-horizontal .el-step__line {
      display: none;
    }
    .el-step__main {
      flex: 1;
      display: flex;
      .el-step__title {
        flex: auto;
      }
      .el-step__description {
        flex: auto;
      }
    }
    .el-step__description::before {
      transform: rotate(-45deg) translateY(-2px);
      transform-origin: 0 0;
    }
    .el-step__description::after {
      transform: rotate(45deg) translateY(2px);
      transform-origin: 100% 100%;
    }
    .el-step__description::after,
    .el-step__description::before {
      content: '';
      display: inline-block;
      position: absolute;
      height: 8px;
      top: 15px;
      width: 1px;
      background: var(--el-text-color-placeholder);
    }
    .is-flex .el-step__description::after,
    .is-flex .el-step__description::before {
      display: none;
    }
    .is-success {
      color: #165dff;
      border-color: #e8f3ff;
      // background-color: #e8f3ff;
      .el-step__icon.is-text {
        background-color: #e8f3ff;
        border: 1px solid #e8f3ff;
      }
    }
    .is-success.el-step__description::after,
    .is-success.el-step__description::before {
      content: '';
      display: inline-block;
      position: absolute;
      height: 8px;
      top: 15px;
      width: 1px;
      background: #3270ff;
    }
    .is-wait {
      color: #4e5969;
      border-color: #f2f3f5;
      .el-step__icon.is-text {
        background-color: #f2f3f5;
        border: 1px solid #f2f3f5;
      }
    }
    .el-step__title {
      color: #000;
    }
    .isActive {
      .el-step__icon.is-text {
        background-color: #3270ff;
        border: 1px solid #3270ff;
      }
      .el-step__icon-inner {
        color: #ffffff;
      }
    }
  }
</style>
